<template>
  <view class="container">
    <view class="content">
      <view class="top_box">
        <view class="kong"></view>
        <view class="top1 flexs2">
          <image class="up_img"
                 @click="backHandler"
                 src="../../static/image/bs_back.png"></image>
          <view class="titles">我的钱包</view>
          <view class="status">
          </view>
        </view>
        <view class="money_box">
          <view class="top_money">{{money}}</view>
          <view class="money_tip">钱包余额(元)</view>
        </view>
        <navigator class="box_btn"
                   url="/pages/wallet/Recharge">充值</navigator>
      </view>
      <view class="list_box">
        <navigator class="list_box_item"
                   url="/pages/wallet/Recharge_det">
          <image class="list_item_l"
                 src="../../static/image/wdqb_ico_sr@2x.png"></image>
          <view class="list_item_r">
            <view class="list_item_title">收入明细</view>
            <image src="../../static/image/grzx_ico_jr_hui@2x.png"
                   mode=""></image>
          </view>
        </navigator>
        <navigator class="list_box_item"
                   url="/pages/wallet/With_det">
          <image class="list_item_l"
                 src="../../static/image/wdqb_ico_zc@2x.png"></image>
          <view class="list_item_r1">
            <view class="list_item_title">支出明细</view>
            <image src="../../static/image/grzx_ico_jr_hui@2x.png"
                   mode=""></image>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      money: ''
    }
  },
  onLoad() {
    this.getMoney()
  },
  methods: {
    backHandler() {
      uni.navigateBack({
        delta: 1
      })
    },
    //zhang/Wallet/get_money
    async getMoney() {
      const { data } = await this.$http.post('zhang/Wallet/get_money')
      console.log(data)
      this.money = data.data
    }
  }
}
</script>

<style>
.flexs2 {
  display: flex;
  justify-content: flex-start;
  /* text-align: center; */
}
.content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.top_box {
  height: 336rpx;
  width: 100%;
  /* #ifdef APP-PLUS */
  height: 396rpx;
  /* #endif */
  background-image: url('../../static/image/wdqb_img_bg@2x.png');
  background-size: 100% 100%;
}
.kong {
  width: 100%;
  height: var(--status-bar-height);
}
.top1 {
  width: 100%;
  height: 89rpx;
  padding: 26rpx;
}
.up_img {
  width: 20rpx;
  height: 36rpx;
}
.titles {
  flex-grow: 1;
  text-align: center;
  margin-top: -6rpx;
  font-size: 34rpx;
  color: #ffffff;
}
.money_box {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 75rpx;
}
.top_money {
  font-size: 60rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
}
.money_tip {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.box_btn {
  width: 306rpx;
  height: 80rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 16rpx 0px rgba(51, 46, 16, 0.13);
  border-radius: 40rpx;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fcb630;
}
.list_box {
  width: 92%;
  height: 200rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 16rpx 0px rgba(51, 46, 16, 0.13);
  border-radius: 10rpx;
  margin: auto;
  margin-top: 83rpx;
  padding: 0 20rpx;
}
.list_box_item {
  width: 100%;
  height: 99rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list_item_l {
  width: 44rpx;
  height: 47rpx;
}
.list_item_r {
  width: 88%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f5f5f5;
}
.list_item_r1 {
  width: 88%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.no_border {
  border: none !important;
}
.list_item_r image {
  width: 12rpx;
  height: 22rpx;
}
.list_item_r1 image {
  width: 12rpx;
  height: 22rpx;
}
</style>

